<template>
  
<div>

<h2>事件绑定指令</h2>

<p>{{ age }}</p>

<!-- 事件绑定指令语法： v-on:事件名="处理程序"   v-on:  也可以简写成 @ -->
<!-- <button v-on:事件名="处理程序">按钮</button> -->
<!-- <button @事件名="处理程序">按钮</button> -->


<!-- 事件处理程序： 如果代码非常简单，直接写到 <template> 这个区域即可-->
<!-- 处理程序，代码只能使用Vue中定义好的 data数据 或 methods 方法 -->
<button @click="age++">+1</button>


<!-- 事件处理程序，如果代码非常多， 可以用方法，方法必须定义到 和data平级的methods中 -->
<button @click="changeAge">按钮</button>

</div>

</template>

<script>

export default {
  // data 存储数据的
  data() {
    return {
      age: 20
    }
  },
  // methods 是存储方法的
  methods: {
    changeAge () {
      // vue中，找data数据，methods方法.....都是通过 this 直接找【这是Vue中固定的语法】
      this.age--
      console.log(123)
    }
  }
}
</script>

<style>

</style>